<template>
  <div class="head-nav">
    <div class="nav-content">
      <img src="@/assets/images/logo.png" alt="" class="logo">
      <div class="nav-list">
        <div v-for="(item, index) in navList" :key="index" class="nav-item">
          <a :href="item.link">{{ item.name }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const navList = ref([
  {
    name: 'About',
    link: '#'
  }, {
    name: 'Highlights',
    link: '#'
  }, {
    name: 'Guests',
    link: '#'
  }, {
    name: 'Agenda',
    link: '#'
  }, {
    name: 'Pitch',
    link: '#'
  }
])
</script>

<style lang="scss" scoped>
  .head-nav{
    position: absolute;
    left: 0;
    right: 0;
    background-color: #5DD849;
    .nav-content{
      width: 1160px;
      height: 100px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo{
        width: 152px;
        height: 30px;
      }
      .nav-list{
        display: flex;
        justify-content: space-between;
        .nav-item{
          color: #000000;
          font-size: 18px;
          line-height: 22px;
          font-weight: bold;
          a{
            color: inherit;
            text-decoration: none;
          }
          & + .nav-item{
            margin-left: 60px;
          }
        }
      }
    }
  }
</style>